<template>
  <div class="right-chart">
    <dv-border-box-13 class="right-container" style="transform:rotateY(180deg)">
      <div class="lc-header" style="transform:rotateY(-180deg)">
        多工站每日数据情况
      </div>
      <dv-charts class="rightcharts" :option="option" style="transform:rotateY(-180deg)" />
    </dv-border-box-13>
  </div>
</template>
<script>
import { formatDate } from "@/network/home";
let option = {
  legend: {
    data: [
      // { name: "工站1", color: "#00baff" },
      // { name: "工站2", color: "#ff5ca9" },
      // { name: "工站3", color: "#f5d94e" },
      // { name: "OEE", color: "#D7001E" },
    ],
    // orient: 'vertical',
    bottom: 20,
    left: 0,
    textStyle: {
      fill: "#999",
    },
  },
  xAxis: {
    data: [],
    // data: [ "12/18",  "12/19", "12/20",  "12/21",  "12/22",  "12/23", "12/24", "12/25", "12/26", "12/27", "12/28","12/29","12/30","12/31",],
    axisLine: {
      //坐标轴 轴线相关设置。
      style: {
        stroke: "#999", //Stroke属性定义一条线，文本或元素轮廓颜色(可以理解为border)
      },
    },
    axisLabel: {
      //坐标轴 刻度标签的相关设置。
      style: {
        fill: "#999", //形状轮廓内的填充
        fontSize: "13px",
      },
    },
    axisTick: {
      //坐标轴 刻度相关设置。
      show: true,
    },
  },
  yAxis: [
    {
      name: "数量",
      data: "value",
      splitLine: {
        //坐标轴在 grid 区域中的分隔线。
        show: true,
        style: {
          lineDash: [3, 3],
        },
      },
      axisLine: {
        style: {
          stroke: "#999",
        },
      },
      axisLabel: {
        style: {
          fill: "#999",
          fontSize: "16px",
        },
      },
      axisTick: {
        //坐标轴 刻度相关设置。
        show: false,
      },
      min: 0,
      // max:10000,
      // interval:100,
    },

    {
      name: "OEE",
      data: "value",
      position: "right",
      splitLine: {
        //坐标轴在 grid 区域中的分隔线。
        show: false,
      },
      axisLine: {
        style: {
          stroke: "#999",
        },
      },
      axisLabel: {
        style: {
          fill: "#999",
          fontSize: "16px",
        },
        formatter: "{value}%",
      },
      axisTick: {
        //坐标轴 刻度相关设置。
        show: true,
      },
      min: 0,
      max: 100,
      interval: 20,
    },
  ],

  series: [
    // {
    //   name: "工站1",
    //   // data: [],
    //   // data: [10, 80, 100, 21, 17, 20, 12, 10, 18, 38, 80, 56, 87, 70],
    //   type: "bar",
    //   barStyle: {
    //     fill: "rgb(0,186,255)",
    //     stroke: "rgb(0,186,255)",
    //   },
    // },
    // {
    //   name: "OEE",
    //   // data: [],
    //   data: [20, 62, 80, 78, 65, 88, 86, 84, 62, 98, 88, 100, 88, 92],
    //   type: "line",
    //   lineArea: {
    //     show: true,
    //     gradient: ["rgba(215,0,30,.8)", "rgba(215,0,30,.2)"],
    //   },
    //   lineStyle: {
    //     stroke: "#D7001E",
    //   },
    //   linePoint: {
    //     radius: 4,
    //     style: {
    //       fill: "#D7001E",
    //       stroke: "#f00",
    //     },
    //   },
    // },
  ],
};
export default {
  name: "RightChart",
  data() {
    return {
      timer:null,
      option: {}
    }
  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.timer);
    console.log("beforeDestroy");
    this.option = {};
  },
  destroyed() {
    //清除定时器
    clearInterval(this.timer);
    console.log("destroyed");
    this.option = {};
  },
  mounted() {
    this.DailyDetails();
    this.getlist()
  },
  methods: {
    getlist(){
      let num = 0;
      //创建并执行定时器
      this.timer = setInterval(() => {
        this.DailyDetails();
        //当num等于100时清除option 
        if (num % 10 == 0) {
          this.option = {};
        }
        num++;
      }, 10000);
    },
    DailyDetails() {
      formatDate().then((res) => {
        let data = res.data.data || [];  
        if(data.length < 1) return;
        let leng = data[0].list.length - 1,flag = false,time = [], name = [],send = {}, date = [],ser = [], oee = [];
        data.forEach(item => {
          time.push(item.date);
          item.list.forEach((itea, index) => {
            if(!flag && index < leng + 1) {
              if (index == leng) flag = true;
              name.push( { name: itea.stationName},{ name: itea.stationName + "OEE"})
            }
            if(!send["_" + itea.stationId]) {
              send["_" + itea.stationId] = {stationName:itea.stationName};
              send["_" + itea.stationId]["currentDateCompleteOutput"] = [itea.currentDateCompleteOutput];
              send["_" + itea.stationId]["oee"] = [itea.oee];
            }else {
              send["_" + itea.stationId]["currentDateCompleteOutput"].push(itea.currentDateCompleteOutput)
              send["_" + itea.stationId]["oee"].push(itea.oee)
            }
          })
        })
        time.forEach((item) => {
          let d = item.split(" ")[0].split("-");
          date.push(d[1] + "/" + d[2]);
        });
        for (let i in send) {
          //let _index = i.stationId;
          ser.push({
            name: send[i].stationName,
            data: (() => {
              let f = [];
              send[i].currentDateCompleteOutput.forEach((item) => {
                f.push(Number(item));
              });
              return f.reverse();
            })(),
            type: "bar",
            label: {
              show: true,           
            }
            // barStyle: {
            //   fill: colors[_index - 1],
            //   // stroke: "rgb(0,186,255)",
            // },
          })
          oee.push({
            name: send[i].stationName + 'OEE',//"OEE" + (_index - 1),
            data: (() => {
              let f = [];
              send[i].oee.forEach((item) => {
                f.push(parseFloat(Number(item)));
              });
              return f.reverse();
            })(),
            type: "line",
            yAxisIndex: 1,
            animationCurve: "easeOutBounce",
            label: {
              show: true,
              formatter:"{value}%"
            },
            // lineArea: {
            //   show: true,
            //   gradient: ["rgba(215,0,30,.8)", "rgba(215,0,30,.2)"],
            // },
            // lineStyle: {
            //   stroke: colors[_index - 1],
            // },
            linePoint: {
              radius: 4,
              // style: {
              //   fill: colors[_index - 1],
              //   stroke: colors[_index - 1],
              // },
            }
          })
        }
        option.legend.data = name;
        date.reverse();
        option.xAxis.data = date;
        ser = [...ser, ...oee];
        option.series = ser;
        this.option = option;
      })
    }
  }

};
</script>
<style lang="less">
.right-chart {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;

  .right-container {
    // width: 50%;
    .rightcharts {
      width: 100%;
      height: 100%;
    }

    .lc-header {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 50px;
      // padding-top: 20px;
      box-sizing: border-box;
      font-size: 20px;
      color: #3bc5ec;
      font-weight: 700;
    }
  }
}
</style>
